﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>是男人就过50关</title>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/npc.js"></script>
    <script src="js/zhuangbei.js"></script>
    <script src="js/YXEven.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            padding: 0;
            height: 720px;
        }

        .mark {
            background-color: rgba(255,255,255,.9);
            height: 1080px;
            width: 100%;
            top: 0;
            position: absolute;
            z-index: 2;
        }

        .content {
            width: 100%;
            height: 100%;
        }

            .content > div {
                float: left;
                width: 33.33%;
                height: 100%;
                text-align: center;
            }

        .pn-data {
            height: 320px;
            padding: 15px 10px;
        }

            .pn-data > div {
                float: left;
                width: 50%;
            }

        .e-up {
            color: #ff402d;
            font-size: 16px;
        }

        .e-down {
            color: #26a3e2;
            font-size: 16px;
        }

        .e-set {
            color: #0d7fc2;
            font-size: 16px;
        }

        .jn {
            color: #770eee;
            font-size: 16px;
        }

        .max-jn {
            color: #ee450e;
            font-size: 20px;
        }

        .zb {
            color: #ff6a00;
            font-size: 16px;
        }

        .npcname {
            font-size: 30px;
        }

        .npcface {
            height: 700px;
            width: 300px;
            margin: 15px auto;
            background-position: top center;
            background-size: cover;
        }

        #txtData {
            height: 400px;
            width: 100%;
            border: 1px solid #555;
            margin: auto;
            overflow: auto;
        }

        .w-yx {
            color: #06d57b;
        }

        .w-boss {
            color: #0a4ceb;
        }

        .w-life {
            color: #ff0000;
        }

        p {
            font-weight: 700;
            font-family: 'Microsoft YaHei UI';
            font-size: 13px;
            margin: 5px 0;
        }

        .pn-selyx {
            border: 1px solid #777;
            background-color: #fff;
            margin-top: -250px;
            margin-left: -250px;
            width: 500px;
            height: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
        }

            .pn-selyx > div {
                margin-top: 15px;
            }

        .pn-sel-touxiang {
            overflow: hidden;
            position: relative;
        }



        .touxiang-p, .touxiang-n {
            width: 15%;
            float: left;
            text-align: center;
            padding-top: 150px;
        }

        .sel-touxiang {
            border: 1px solid #000;
            margin: auto;
            height: 300px;
            background-repeat: no-repeat;
            background-size: cover;
            width: 70%;
            float: left;
        }

        .pn-name {
            text-align: center;
            clear: both;
        }

        .pn-ctrl {
            text-align: center;
        }

        .dijiguan {
            position: absolute;
            font-size: 60px;
            top: 130px;
            left: 50%;
            margin-left: -78px;
            display: none;
            font-family: arial,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
        }
    </style>
    <script>
        var g_yx = {},
            g_boss = {},
            g_yxArr = new Array(),
            g_bossArr = new Array(),
            g_ZhuangBeiArr = new Array(),
            g_guan = 20,
            g_setInterFight,
            g_baseAU,
            g_bossAU,
            g_endAU,
            g_setInterBaseAU,
            g_YXEvenArr;
        $(function () {
            initData();
            initUI();
        });

        function initData() {
            initNPC();

            g_baseAU = new Audio('audio/Conflicting Passions.mp3');
            g_baseAU.preload;

            g_bossAU = new Audio('audio/2-22 Unfathomed Force.mp3');
            g_bossAU.preload;

            g_endAU = new Audio('audio/1-22 Strange Feel.mp3');
            g_endAU.preload;

            initZhuangBeiEven();
            initYXEven();
        }

        function initUI() {
            setSelectYX(0);

            $('#btnPrev').click(function () {
                setSelectYX(-1);
            });

            $('#btnNext').click(function () {
                setSelectYX(+1);
            });

            $('#btnStar').click(function () {

                beginGame();

            });
        }



        function playBaseAU() {
            g_bossAU.pause();
            g_baseAU.currentTime = 0;
            g_baseAU.loop;
            g_baseAU.play();
            //setTimeout(function () {
            //    replayBaseAU();
            //}, 1000 * (60 + 45));

            //function replayBaseAU() {
            //    g_baseAU.currentTime = 14;
            //    g_setInterBaseAU = setInterval(function () {
            //        g_baseAU.currentTime = 14;
            //    }, 1000 * (60 + 25));
            //}
        }

        function playBossAU() {
            g_baseAU.pause();
            g_bossAU.currentTime = 0;
            g_bossAU.loop;
            g_bossAU.play();
        }

        function playEnd() {
            g_baseAU.pause();
            g_bossAU.pause();
            g_endAU.play();
        }


        function beginGame() {
            $('.mark').hide();
            g_yx = getSelectYX();
            playBaseAU();
            var newXY = createYX();
            var newBOSS = createBoss();
            
            addWord('第1关');
            starFight(newXY, newBOSS);
        }

        function setSelectYX(t) {
            var $com = $('#selYX');
            var m_index = Number($com.attr('data-index'));
            var m_ind = m_index + Number(t);

            if (m_ind <= g_yxArr.length - 1 && m_ind >= 0) {
                m_index = m_ind;
            }

            var m_selYX = g_yxArr[m_index];
            var m_imgUrl = '/image/touxiang/yx/' + m_selYX.face;
            $com.css('background-image', 'url(' + m_imgUrl + ')').attr('data-index', m_index);
            $('#txtName').val(m_selYX.name);
        }

        function getSelectYX() {
            var $com = $('#selYX');
            var m_index = $com.attr('data-index');
            var m_selXY = g_yxArr[m_index];
            m_selXY.name = $('#txtName').val();
            return m_selXY;

        }

        function setBoss() {
            var m_imgName = g_bossArr[g_guan - 1].face;
            var m_imgUrl = '/image/touxiang/boss/' + g_bossArr[g_guan - 1].face;
            $('#boss').css('background-image', 'url(' + m_imgUrl + ')');
        }

        function starNextFight() {
            clearInterval(g_setInterFight);
            ++g_guan;
            addWord('第' + g_guan + '关');
            var newXY = createYX();
            var newBOSS = createBoss();
            starFight(newXY, newBOSS);
        }

        function createYX() {
            var newXY = {};
            $.extend(newXY, g_yx);
            newXY.life = Math.ceil(newXY.life * ((g_guan - 1) / 10 + 1));
            newXY.STR = Math.ceil(newXY.STR * ((g_guan - 1) / 10 + 1));
            newXY.DEF = Math.ceil(newXY.DEF * ((g_guan - 1) / 10 + 1));
            return newXY;
        }

        function createBoss() {
            if (g_guan % 5 == 0) { // 每5关产生大boss
                var m_boss = g_bossArr[(g_guan / 5) - 1]; // 暂时不考虑下标越界
                playBossAU();
            }
            else {
                var m_boss = getBaseBoss();
                m_boss.life = Math.ceil(m_boss.life * ((g_guan - 1) / 8 + 1));
                m_boss.STR = Math.ceil(m_boss.STR * ((g_guan - 1) / 7 + 1));
                m_boss.DEF = Math.ceil(m_boss.DEF * ((g_guan - 1) / 7 + 1));
                if (g_guan % 5 - 1 == 0) { // 只有在大boss的下一关，才更换音乐
                    playBaseAU();
                }
            }

            $.extend(g_boss, m_boss); // 记录当前boss资料到全局属性，用于判断当前状态和原来的状态是否需要更换头像
            return m_boss;

        }

        function endGame() {
            clearInterval(g_setInterFight);
            playEnd();
            if (confirm("你输了，是否重开？")) {
                location.reload();
            }
        }

        function starFight(p_yx, p_boss) {
            updateNPCData(p_yx, p_boss);
            var $com = $('#txtData');
            var m_turn = 1;
            g_setInterFight = setInterval(function () {
                if (m_turn == 1) {
                    if (runFight(p_yx, p_boss, m_turn)) {
                        starNextFight();
                    }
                    else {
                        m_turn = 2;
                    }
                }
                else {
                    if (runFight(p_boss, p_yx, m_turn)) {
                        endGame();
                    }
                    else {
                        m_turn = 1;
                    }
                }

                updateNPCData(p_yx, p_boss);
                $com.scrollTop($com[0].scrollHeight);
            }, 900);
        }

        function runFight(p_npcA, p_npcB, p_actionType) {

            // 減少buff持续时间
            checkBUFF(p_npcA);
            checkBUFF(p_npcB);

            if (p_npcB.life > 0) {
                var m_evenTitle = runFace(p_npcA) + runSkill(p_npcA);
                if (p_actionType == 1) { // 只有英雄才会发生以下事件
                    m_evenTitle += runZhuangbeiEven(p_npcA) + runYXEven(p_npcA); // 发生一个意外的事件,只有英雄才有意外事件
                }
                var m_STR_even = p_npcA.turnSTR > 0 ? p_npcA.tempSTR : 0; // 计算事件产生的STR影响
                var m_STR_skill = p_npcA.turnSTR_skill > 0 ? p_npcA.tempSTR_skill : 0;// 计算技能产生的STR影响

                var m_DEF_even = p_npcB.turnDEF > 0 ? p_npcB.tempDEF : 0; // 计算事件对防御者产生的DEF影响
                var m_DEF_skill = p_npcB.turnDEF_skill > 0 ? p_npcB.tempDEF_skill : 0;// 计算防御者的技能产生的DEF影响

                var m_eSTR = p_npcA.STR + m_STR_even + m_STR_skill; // 攻击者最终产生的攻击力
                var m_eDEF = p_npcB.DEF + m_DEF_even + m_DEF_skill; // 防御者最终产生的防御力

                var m_tLife = m_eSTR - m_eDEF; // 最终产生的伤害
                m_tLife = m_tLife < 0 ? 0 : m_tLife;

                p_npcB.life -= m_tLife;//REVIEW 这里可以再判断一下是否血量少于0，重置为0

                var str = createWord(p_actionType, p_npcA, p_npcB, m_tLife, m_evenTitle);

                addWord(str);
                if (p_npcB.life <= 0) {
                    return true; // 对战结束
                }
                else {
                    return false;
                }
            }
            else {
                return true; // 对战结束
            }
        }

        function createWord(p_actionType, p_npcA, p_npcB, p_tLife, p_evenTitle) {
            var c_npcA,
                c_npcB,
                m_str;
            if (p_actionType == 1) {
                c_npcA = 'w-yx';
                c_npcB = 'w-boss';
            }
            else {
                c_npcA = 'w-boss';
                c_npcB = 'w-yx';
            }
            m_str = '<p><span class="' + c_npcA + '">' + p_npcA.name + '</span>' + p_evenTitle
                    + '对<span class="' + c_npcB + '">' + p_npcB.name + '</span>'
                    + '造成伤害' + '<span class="w-life">' + p_tLife + '</span></p>';

            return m_str;
        }

        // 減少buff持续时间
        function checkBUFF(p_npc) {
            p_npc.turnDEF = p_npc.turnDEF > 0 ? p_npc.turnDEF - 1 : p_npc.turnDEF;
            p_npc.turnSTR = p_npc.turnSTR > 0 ? p_npc.turnSTR - 1 : p_npc.turnSTR;

            p_npc.turnDEF_skill = p_npc.turnDEF_skill > 0 ? p_npc.turnDEF_skill - 1 : p_npc.turnDEF;
            p_npc.turnSTR_skill = p_npc.turnSTR_skill > 0 ? p_npc.turnSTR_skill - 1 : p_npc.turnSTR;
        }

        function updateNPCData(p_yx, p_boss) {
            $('#myHeroy').css('background-image', 'url(/image/touxiang/yx/' + p_yx.face + ')');
            $('#myName').text(p_yx.name);
            $('#dYXLife').text(p_yx.life);
            $('#dYXSrt').text(p_yx.STR);
            $('#dYXDef').text(p_yx.DEF);

            $('#boss').css('background-image', 'url(/image/touxiang/boss/' + p_boss.face + ')');
            $('#bossName').text(p_boss.name);
            $('#dBossLife').text(p_boss.life);
            $('#dBossSrt').text(p_boss.STR);
            $('#dBossDef').text(p_boss.DEF);
        }

        function addWord(str) {
            $('#txtData').html($('#txtData').html() + str);
        }
    </script>
</head>
<body>
    <div class="content">
        <div>
            <div id="myHeroy" class="npcface">
            </div>
        </div>
        <div>
            <div class="pn-data">
                <div>
                    <div class="npcname" id="myName"></div>
                    <span>生命值：</span>
                    <div class="npcdata" id="dYXLife"></div>
                    <span>力量：</span>
                    <div class="npcdata" id="dYXSrt"></div>
                    <span>物理防御：</span>
                    <div class="npcdata" id="dYXDef"></div>
                </div>
                <div>
                    <div class="npcname" id="bossName"></div>
                    <span>生命值：</span>
                    <div class="npcdata" id="dBossLife"></div>
                    <span>力量：</span>
                    <div class="npcdata" id="dBossSrt"></div>
                    <span>物理防御：</span>
                    <div class="npcdata" id="dBossDef"></div>
                </div>


            </div>
            <div class="pn-word">
                <div id="txtData"></div>
            </div>

        </div>
        <div>
            <div id="boss" class="npcface">

            </div>
        </div>
    </div>
    <div class="mark">
        <div class="pn-selyx">
            <div class="pn-sel-touxiang">
                <div class="touxiang-p">
                    <a id="btnPrev" href="#">上一个</a>
                </div>
                <div id="selYX" data-index="0" class="sel-touxiang"></div>
                <div class="touxiang-n">
                    <a id="btnNext" href="#">下一个</a>
                </div>
            </div>
            <div class="pn-name">
                <span>请输入你的英雄名字：</span>
                <input id="txtName" type="text" />
            </div>
            <div class="pn-ctrl">
                <input id="btnStar" type="button" value="开  始" />
            </div>
        </div>
    </div>
    <div class="dijiguan">

    </div>
</body>
</html>
